<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 单根节点 -->
		<div id="app">
			{{ message }}
			<div>
				子元素div中{{ message }}
			</div>
			<span v-text="spanText">

			</span>
			<span v-html="htmlText"></span>
			<input type="checkbox" value="2" v-bind:value="checkValue" />
			<input type="checkbox" value="2" :value="checkValue" />简写方式
			<input type="checkbox" value="会不会被修改" :value="'直接写值'" />字符串直接写值
			<input type="checkbox" value="会不会被修改" :value="true" />boolean直接写值
			<input type="checkbox" value="会不会被修改" :[attr]="true" />动态参数
			<p v-if="seen">现在你看到我了，先去seen是false，先去决断要不要渲染这个dom元素</p>
			<h1 v-else>Oh no 😢</h1>
			<div v-if="type === 'A'">
			  A
			</div>
			<div v-else-if="type === 'B'">
			  B
			</div>
			<div v-else-if="type === 'C'">
			  C
			</div>
			<div v-else>
			  Not A/B/C
			</div>
			<p hidden>dom的hidden属性，本质上是通过css的display:none;来实现的</p>
			<!-- 与for in和for-of循环类似 -->
			<ul>
				<li v-for="todo in todos">{{todo.text}}</li>
			</ul>
			<ul>
				<li v-for="(item, index) in todos">{{index+ "," + item.text}}</li>
			</ul>
			<ul>
				<li v-for="(item, index) of todos">{{index+ "," + item.text}}</li>
			</ul>
			<ul>
				<li v-for="(value, name) of book">{{name+ "," + value}}</li>
			</ul>
		</div>
		<!-- <div>
			vue没有接管该dom元素{{ message }}
		</div> -->
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
				创建Vue对象
					1、指令该对象挂载的Dom元素，一般通过id
					2、Vue对象一创建，就会接管该Dom元素及其以下所有的Dom
					3、通过Vue的特有指令，将data变量中的值显示在Dom元素上
					4、指令只能写在dom的开始标签的<>内，类似于元素的属性写法
			*/
			let app = new Vue({
				el: '#app', //el：全称为element，将Vue对象挂载到哪个标签元素上。建议使用id
				data: { //定义Vue变量区域
					message: 'Hello Vue!',
					spanText: '这是span的内容',
					htmlText: '<a href="http://www.baidu.com">百度一下</a>',
					checkValue: 1,
					seen: false,
					type: 'C',
					attr: "aaa",
					todos: [{
							text: '学习 JavaScript'
						},
						{
							text: '学习 Vue'
						},
						{
							text: '整个牛项目'
						}
					],
					book: {
						id: 1,
						name: 'Java从入门到放弃',
						price: 80,
						tdate: '2020-07-01',
						count: 1,
						account: "hehe"
					}


					// 直接写值: "dfdfd"
				}
			});
			//使用Vue将书本表格显示
		</script>
	</body>
</html>
